<%--
  Created by IntelliJ IDEA.
  User: 86130
  Date: 2025/3/27
  Time: 08:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考勤管理 - OA办公系统</title>
    <link href="css/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.7.1.js"></script>
</head>
<body class="bg-gray-50 h-screen overflow-auto p-6">
<div class="container mx-auto fade-in">
    <!-- 页面标题 -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">考勤管理</h1>
        <div class="flex space-x-2">
            <button onclick="clockIn()"
                    class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center btn-hover-effect" onclick="clockIn()">
                <i class="fas fa-clock mr-2"></i>
                <span>打卡签到</span>
            </button>
            <button class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center btn-hover-effect">
                <i class="fas fa-file-export mr-2"></i>
                <span>导出报表</span>
            </button>
            <div class="relative">
                <input type="text" placeholder="搜索考勤记录"
                       class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
            </div>
        </div>
    </div>

    <!-- 考勤概览 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-5 card-hover">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-500 text-sm">本月出勤</p>
                    <h2 class="text-3xl font-bold text-gray-800">22天</h2>
                </div>
                <div class="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-calendar-check text-blue-500 text-xl"></i>
                </div>
            </div>
            <div class="mt-4">
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-blue-500 h-2 rounded-full" style="width: 85%"></div>
                </div>
                <p class="text-xs text-gray-500 mt-1">出勤率 85%</p>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-5 card-hover">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-500 text-sm">迟到</p>
                    <h2 class="text-3xl font-bold text-gray-800">2次</h2>
                </div>
                <div class="h-12 w-12 bg-yellow-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-hourglass-half text-yellow-500 text-xl"></i>
                </div>
            </div>
            <div class="mt-4">
                <div class="flex justify-between text-xs text-gray-500">
                    <span>最近一次: 2023-06-12</span>
                    <span class="text-yellow-500">迟到15分钟</span>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-5 card-hover">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-500 text-sm">请假</p>
                    <h2 class="text-3xl font-bold text-gray-800">3天</h2>
                </div>
                <div class="h-12 w-12 bg-purple-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-user-clock text-purple-500 text-xl"></i>
                </div>
            </div>
            <div class="mt-4">
                <div class="flex justify-between text-xs text-gray-500">
                    <span>年假剩余</span>
                    <span class="text-purple-500">7天</span>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-5 card-hover">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-500 text-sm">加班</p>
                    <h2 class="text-3xl font-bold text-gray-800">12小时</h2>
                </div>
                <div class="h-12 w-12 bg-red-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-business-time text-red-500 text-xl"></i>
                </div>
            </div>
            <div class="mt-4">
                <div class="flex justify-between text-xs text-gray-500">
                    <span>本月加班费</span>
                    <span class="text-red-500">¥600</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 考勤分类标签 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="flex border-b overflow-x-auto">
            <button class="px-6 py-3 text-blue-500 border-b-2 border-blue-500 font-medium">我的考勤</button>
            <button class="px-6 py-3 text-gray-500 hover:text-blue-500">部门考勤</button>
            <button class="px-6 py-3 text-gray-500 hover:text-blue-500">请假申请</button>
            <button class="px-6 py-3 text-gray-500 hover:text-blue-500">加班申请</button>
            <button class="px-6 py-3 text-gray-500 hover:text-blue-500">外出申请</button>
            <button class="px-6 py-3 text-gray-500 hover:text-blue-500">考勤统计</button>
        </div>
    </div>

    <!-- 日期筛选 -->
    <div class="bg-white rounded-lg shadow p-4 mb-6">
        <div class="flex flex-wrap items-center justify-between">
            <div class="flex items-center space-x-4">
                <div class="flex items-center">
                    <span class="text-gray-500 mr-2">日期范围:</span>
                    <input type="date" id="startDate"
                           class="border border-gray-300 rounded px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <span class="mx-2">至</span>
                    <input type="date" id="endDate"
                           class="border border-gray-300 rounded px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            <div class="flex items-center space-x-2">
                <button class="px-4 py-1 bg-blue-100 text-blue-600 rounded hover:bg-blue-200">
                    <i class="fas fa-filter mr-1"></i>
                    筛选
                </button>
                <button class="px-4 py-1 text-gray-500 hover:text-blue-500">
                    <i class="fas fa-redo-alt mr-1"></i>
                    重置
                </button>
            </div>
        </div>
    </div>

    <!-- 考勤记录表格 -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <table class="w-full enhanced-table">
            <thead>
            <tr class="bg-gray-50 text-left">
                <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">星期</th>
                <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">上班时间</th>
                <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">下班时间</th>
                <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">工时</th>
                <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th>
            </tr>
            </thead>
            <tbody class="divide-y divide-gray-200" id="tbody">

            <!-- 考勤记录1 -->
<%--            <tr class="hover:bg-blue-50">--%>
<%--                <td class="px-6 py-4 whitespace-nowrap">--%>
<%--                    <span class="text-sm text-gray-900">2023-06-15</span>--%>
<%--                </td>--%>
<%--                <td class="px-6 py-4 whitespace-nowrap">--%>
<%--                    <span class="text-sm text-gray-500">星期四</span>--%>
<%--                </td>--%>
<%--                <td class="px-6 py-4 whitespace-nowrap">--%>
<%--                    <span class="text-sm text-gray-900">08:55:32</span>--%>
<%--                </td>--%>
<%--                <td class="px-6 py-4 whitespace-nowrap">--%>
<%--                    <span class="text-sm text-gray-900">18:10:45</span>--%>
<%--                </td>--%>
<%--                <td class="px-6 py-4 whitespace-nowrap">--%>
<%--                    <span class="text-sm text-gray-900">9小时15分钟</span>--%>
<%--                </td>--%>
<%--                <td class="px-6 py-4 whitespace-nowrap">--%>
<%--                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">正常</span>--%>
<%--                </td>--%>
<%--                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>--%>
<%--            </tr>--%>

            </tbody>
        </table>
    </div>
</div>
</body>
</html>
<script>
    let startDate=new Date();
    startDate.setDate(1);
    let endDate=new Date();
    // 获取下个月的第一天
    endDate.setMonth(endDate.getMonth()+1);
    endDate.setDate(0);
    let startDateStr=startDate.toISOString().slice(0,10)
    let endDateStr=endDate.toISOString().slice(0,10)
    document.getElementById("startDate").value=startDateStr;
    document.getElementById("endDate").value=endDateStr;
    //页面加载时获取考勤记录
    $(function (){
        getAttendanceList();
    })




    // 获取考勤记录
    function getAttendanceList(){
        $.ajax({
            url:"${pageContext.request.contextPath}/attendance",
            type:"get",
            data:{
                "employeeId":'${user.id}',
                "method":"list",
                "startDate":document.getElementById("startDate").value,
                "endDate":document.getElementById("endDate").value
            },
            dataType:"json",
            success:function (data) {
                console.log(data);
                $('#tbody').empty();
                for(const att of data){
                    let tr = `            <tr class="hover:bg-blue-50">
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="text-sm text-gray-900">`+att.checkInTime+`</span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="text-sm text-gray-500">星期四</span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="text-sm text-gray-900">08:55:32</span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="text-sm text-gray-900">18:10:45</span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="text-sm text-gray-900">9小时15分钟</span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">`+att.status+`</span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
            </tr>`;
                    $('#tbody').append(tr);
                }
            }
        })
    }



    function clockIn(){
        if (window.isClockingIn) {
            console.log("正在打卡，请勿重复操作！");
            return;
        }
        window.isClockingIn = true;

        console.log("打卡" + ${user.id});
        $.ajax({
            url:"${pageContext.request.contextPath}/attendance",
            type:"get",
            data:{
                "employeeId":'${user.id}',
                "method":"clockIn"
            },
            dataType:"json",
            success:function (data) {
                console.log(data)
                if(data.code==200){
                    alert(data.msg)
                }
            },
            complete: function () {
            // 接口调用完成后恢复状态
            window.isClockingIn = false;
        }
        })
    }
</script>
